---
title: List on a scroll container
description: A guide to use Fluid DnD to make autoscroll on a list.
---

import SingleVerticalListWithAutoscroll from "@/components/svelte/SingleVerticalListWithAutoscroll.svelte";
import { Code } from "@astrojs/starlight/components";

### List of number example

If you have a large list of elements with a scroll, you can easily navigate through the list.
First, we're going to create a large list of numbers:

export const listOfNumbers = `<script setup lang="ts">
    const list = $state([...Array(20).keys()]);
    const [ parent ] = useDragAndDrop(list);
</script>`;

<Code code={listOfNumbers} lang="svelte" />

### Using useDragAndDrop

We're going to make `parent` element scrollable:

export const highlightsDnD = ['number-list','overflow: auto;'];

export const listOfNumberInsideDnD = `
<ul ref="parent" class="number-list">
  {#each list as element, index }
    <li class="number" data-index = {index}>
        { element }
    </li>
  {/each }
</ul>
<style>
// ....
.number-list {
    display: block;
    padding-inline: 10px;
    overflow: auto;
    height: 300px;
}
</style>
`;

<Code code={listOfNumberInsideDnD} lang="svelte" mark={highlightsDnD} />
### Preview

This is what you got as a result:

<div class="p-8 bg-[var(--sl-color-gray-6)] h-96">
  <SingleVerticalListWithAutoscroll client:load />
</div>
